---
categories: [Widgets]
layout: page
title: Progress Bars
resource: true
---
      <h2>Basic Example</h2>
      <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
          <span class="sr-only">60% Complete</span>
        </div>
      </div>
      <h2>With Label</h2>
      <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
          <span>60% Complete</span>
        </div>
      </div>
      <h2>Contextual Alternatives</h2>
      <div class="progress">
        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
          <span class="sr-only">40% Complete (success)</span>
        </div>
      </div>
      <div class="progress">
        <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
          <span class="sr-only">20% Complete</span>
        </div>
      </div>
      <div class="progress">
        <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
          <span class="sr-only">60% Complete (warning)</span>
        </div>
      </div>
      <div class="progress">
        <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
          <span class="sr-only">80% Complete</span>
        </div>
      </div>
      <h2>Striped</h2>
      <div class="progress progress-striped">
        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
          <span class="sr-only">40% Complete (success)</span>
        </div>
      </div>
      <div class="progress progress-striped">
        <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
          <span class="sr-only">20% Complete</span>
        </div>
      </div>
      <div class="progress progress-striped">
        <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
          <span class="sr-only">60% Complete (warning)</span>
        </div>
      </div>
      <div class="progress progress-striped">
        <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
          <span class="sr-only">80% Complete (danger)</span>
        </div>
      </div>
      <h2>Animated</h2>
      <div class="progress progress-striped active">
        <div class="progress-bar"  role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
          <span class="sr-only">45% Complete</span>
        </div>
      </div>
      <h2>Stacked</h2>
      <div class="progress">
        <div class="progress-bar progress-bar-success" style="width: 35%">
          <span class="sr-only">35% Complete (success)</span>
        </div>
        <div class="progress-bar progress-bar-warning" style="width: 20%">
          <span class="sr-only">20% Complete (warning)</span>
        </div>
        <div class="progress-bar progress-bar-danger" style="width: 10%">
          <span class="sr-only">10% Complete (danger)</span>
        </div>
      </div>
      <h2>PatternFly Examples</h2>
      <h3>Sizes</h3>
      <h4>Small</h4>
      <div class="progress progress-sm">
        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
          <span class="sr-only">60% Complete</span>
        </div>
      </div>
      <div class="progress progress-sm progress-striped active">
        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
          <span class="sr-only">60% Complete</span>
        </div>
      </div>
      <h4>Extra Small</h4>
      <div class="progress progress-xs">
        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
          <span class="sr-only">60% Complete</span>
        </div>
      </div>
      <div class="progress progress-xs progress-striped active">
        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
          <span class="sr-only">60% Complete</span>
        </div>
      </div>
      <h3>With Label</h3>
      <h4>Left</h4>
      <div class="progress progress-label-left">
        <div class="progress-bar" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100" style="width: 5%;">
          <span>5%</span>
        </div>
      </div>
      <div class="progress progress-label-left">
        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
          <span>60%</span>
        </div>
      </div>
      <div class="progress progress-label-left">
        <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">
          <span>100%</span>
        </div>
      </div>
      <div class="progress progress-sm progress-label-left">
        <div class="progress-bar" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100" style="width: 5%;">
          <span>5%</span>
        </div>
      </div>
      <div class="progress progress-sm progress-label-left">
        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
          <span>60%</span>
        </div>
      </div>
      <div class="progress progress-sm progress-label-left">
        <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">
          <span>100%</span>
        </div>
      </div>
      <h4>Top Left Description and Top Right Label</h4>
      <div class="progress-description">
        Network Capacity
      </div>
      <div class="progress progress-label-top-right">
        <div class="progress-bar" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100" style="width: 5%;">
          <span>5%</span>
        </div>
      </div>
      <div class="progress-description">
        <div class="spinner spinner-xs spinner-inline"></div> <strong>Downloading:</strong>  Product Repositories
      </div>
      <div class="progress progress-label-top-right">
        <div class="progress-bar" role="progressbar" aria-valuenow="42.7" aria-valuemin="0" aria-valuemax="100" style="width: 42.7%;">
          <span>42.7% (35 of 82MB)</span>
        </div>
      </div>
      <div class="progress-description">
        <span class="count">46,512</span> <strong>Downloading:</strong>  Product Repositories
      </div>
      <div class="progress progress-label-top-right">
        <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">
          <span>100%</span>
        </div>
      </div>
      <div class="progress-description">
        <span class="pficon pficon-ok" data-toggle="tooltip" data-placement="top" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit."></span> <strong>Network Activity:</strong>  10.10.121.02
      </div>
      <div class="progress progress-label-top-right">
        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">
          <span>100%</span>
        </div>
      </div>
      <div class="progress-description">
        <span class="pficon pficon-warning-triangle-o"></span>
        <strong>Network Activity:</strong>  10.10.121.02
      </div>
      <div class="progress progress-label-top-right">
        <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%;">
          <span>75%</span>
        </div>
      </div>
      <div class="progress-description">
        <span class="pficon pficon-error-circle-o"></span>
        <strong>Network Activity:</strong>  10.10.121.02
      </div>
      <div class="progress progress-label-top-right">
        <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width: 10%;">
          <span>10%</span>
        </div>
      </div>
      <h4>Left Description</h4>
      <div class="progress-container progress-description-left">
        <div class="progress-description">
          CPU
        </div>
        <div class="progress">
          <div class="progress-bar" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100" style="width: 5%;">
            <span class="sr-only"><strong>25 of 460</strong> MHz</span>
          </div>
        </div>
      </div>
      <div class="progress-container progress-description-left">
        <div class="progress-description">
          Network Capacity
        </div>
        <div class="progress">
          <div class="progress-bar" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100" style="width: 5%;">
            <span class="sr-only"><strong>250 of 4600</strong> MHz</span>
          </div>
        </div>
      </div>
      <h4>Left Description and Right Label</h4>
      <div class="progress-container progress-description-left progress-label-right">
        <div class="progress-description">
          CPU
        </div>
        <div class="progress">
          <div class="progress-bar" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100" style="width: 5%;">
          <span><strong>25 of 460</strong> MHz</span>
          </div>
        </div>
      </div>
      <div class="progress-container progress-description-left progress-label-right">
        <div class="progress-description">
          Network Capacity
        </div>
        <div class="progress">
          <div class="progress-bar" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100" style="width: 5%;">
          <span><strong>250 of 4600</strong> MHz</span>
          </div>
        </div>
      </div>
      <h3>In Table Cell</h3>
      <table class="table table-bordered table-striped">
        <thead>
          <tr>
            <th>Column heading</th>
            <th>Column heading</th>
            <th>Column heading</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Column content</td>
            <td>
              <div class="progress progress-sm progress-label-left progress-striped">
                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100" style="width: 5%;">
                  <span>5%</span>
                </div>
              </div>
            </td>
            <td>Column content</td>
          </tr>
          <tr>
            <td>Column content</td>
            <td>
              <div class="progress progress-sm progress-label-left progress-striped">
                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                  <span>60%</span>
                </div>
              </div>
            </td>
            <td>Column content</td>
          </tr>
          <tr>
            <td>Column content</td>
            <td>
              <div class="progress progress-sm progress-label-left progress-striped">
                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">
                  <span>100%</span>
                </div>
              </div>
            </td>
            <td>Column content</td>
          </tr>
        </tbody>
      </table>
      <h3>With Tooltip</h3>
      <h4>On Filled Bar</h4>
      <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;" data-toggle="tooltip" title="60% Used">
          <span class="sr-only">60% Used</span>
        </div>
      </div>
      <h4>On Filled Bar and Negative Space</h4>
      <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;" data-toggle="tooltip" title="60% Used">
          <span class="sr-only">60% Used</span>
        </div>
        <div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;" data-toggle="tooltip" title="40% Available">
          <span class="sr-only">40% Available</span>
        </div>
      </div>
      <script>
        // Initialize Tooltip
        jQuery(document).ready(function() {
          jQuery('[data-toggle="tooltip"]').tooltip();
        });
      </script>
